<template>
	<block v-if="type === 'logo'">
		<div class="course-logo" :class="item.logoClass">
			<cc-image width="68rpx" height="68rpx" :src="getImage(iconClass)"></cc-image>
		</div>
	</block>
	<block v-else>
		<div class="course-icon title-black" :class="item.class">
			{{ item.label }}
		</div>
	</block>
</template>

<script>
export default {
	// 课程模式的icon, 根据teachingType区分
	props: {
		value: {
			type: Object,
			default: () => {}
		},
		type: {
			type: String,
			default: 'tag'
		}
	},
	computed: {
		item() {
			if (!this.value) return '';
			const { teaching_type, student_ids } = this.value;
			if (teaching_type === 2) {
				return student_ids && student_ids.indexOf(',') > -1
					? {
							label: '1vN',
							class: 'course-icon-1vN',
							logoClass: 'course-icon-1vN'
					  }
					: {
							label: '1v1',
							class: 'course-icon-1v1',
							logoClass: 'course-icon-1vN'
					  };
			} else {
				return {
					label: '班级授课',
					class: 'course-icon-normal',
					logoClass: 'course-icon-normal'
				};
			}
		},
		iconClass() {
			if (!this.value) return '';
			const { teaching_type } = this.value;
			if (teaching_type === 2) {
				return '1vN';
			} else {
				return 'class-teach';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.course-icon {
	font-size: 20rpx;
	color: #fff;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.course-logo {
	height: 88rpx;
	width: 88rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.course-icon-normal {
	background: linear-gradient(180deg, #5cceff 0%, #4e6eed 100%);
}

.course-icon-1v1 {
	background: linear-gradient(180deg, #ffec5c 0%, #de9815 100%);
}

.course-icon-1vN {
	background: linear-gradient(180deg, #d8a4ff 0%, #7c50ff 100%);
}
</style>